<template>
  <div>
    <!-- 头部 -->
    <a-form :model="form" :hideRequiredMark="true">
      <a-row>
        <a-col :span="4">
          <a-form-item name="number" label="订单号">
            <a-input
              v-model:value="form.number"
              placeholder="请输入订单号"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1">
          <a-form-item name="userId" label="用户ID">
            <a-input
              v-model:value="form.userId"
              placeholder="请输入用户ID"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="6" :offset="1">
          <a-form-item label="申请时间">
            <a-range-picker
              v-model:value="date"
              style="width: 100%"
              :ranges="ranges"
              show-time
              format="YYYY/MM/DD HH:mm:ss"
              @change="panelChange"
            />
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1">
          <a-form-item name="name" label="耗材名称">
            <a-input
              v-model:value="form.name"
              placeholder="请输入耗材名称"
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="5">
          <a-form-item name="status" label="退款状态">
            <a-select
              ref="select"
              v-model:value="form.status"
              @focus="focus"
              @change="handleChange"
              placeholder="请选择退款状态"
            >
              <a-select-option
                v-for="item in statusList"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="2" :offset="1">
          <a-button type="primary" @click="search" class="d-a-center"
            >搜索</a-button
          ></a-col
        >
      </a-row>
    </a-form>

    <!-- 列表 -->
    <a-table
      :columns="columns"
      :data-source="list"
      bordered
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
      :row-selection="rowSelection"
    >
      <template #status="{ record }">
        <a-tag :color="orderListStatusColor(record.status)">{{
          refundOrderStatus(record.status)
        }}</a-tag>
      </template>
      <template #operation="{ record }">
        <a-button
          type="link"
          @click="look(record.number, record.status)"
          v-has="{ a: $route, b: 1 }"
          >查看</a-button
        >
        <a-button
          v-if="record.status == 6"
          type="link"
          @click="deal(record.number, record.status)"
          v-has="{ a: $route, b: 2 }"
          >处理</a-button
        >
      </template>
    </a-table>
    <!-- <a-button type="danger" @click="listDel">删除</a-button> -->

    <template v-if="visible">
      <consume-refund
        :visible="visible"
        :isEdit="isEdit"
        @closeModal="closeModal"
        :number="number"
        :status="status"
      ></consume-refund>
    </template>
  </div>
</template>
<script>
import {
  reactive,
  ref,
  watch,
  computed,
  defineComponent,
  createVNode,
  toRefs,
} from "vue";
import {
  CheckOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { Modal } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";
import ConsumeRefund from "@/views/order/components/ConsumeRefund";
import { selectAllConsumeRefundOrder } from "../../../api/consume/index.js";
import { number } from "echarts";
import { deleteObjBlank } from "@/assets/js/common.js";
import { useModal } from "@/hooks"

// import {
//   refundOrderStatus,
//   refundOrderStatusColor,
// } from "@/assets/js/common.js";
export default {
  components: {
    CheckOutlined,
    EditOutlined,
    ExclamationCircleOutlined,
    ConsumeRefund,
  },
  setup() {
    const form = reactive({});
    const router = useRouter();
    const route = useRoute();

    const data = reactive({
      loading: true,
      list: [],
      number: "",
      visible: false,
      status: "",
    });
    const isEdit = ref(false); //编辑or查看

    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 10,
      total: 0,
    });
    // 订单列表对应的状态
    const orderListStatusColor = computed((status) => {
      return function (status) {
        if (status == 6) {
          return "error";
        }
        if (status == 7) {
          return "#f50";
        }
        if (status == 4) {
          return "success";
        }
      };
    });
    // 状态列表
    const statusList = reactive([
      {
        name: "全部",
        status: "",
      },
      {
        name: "已退款",
        id: 4,
      },
      {
        name: "待审核",
        id: 6,
      },
      {
        name: "已拒绝",
        id: 7,
      },
    ]);
    const refundOrderStatus = (status) => {
      let title = "";
      switch (status) {
        case 6:
          title = "待审核";
          break;
        case 4:
          title = "已退款";
          break;
        case 7:
          title = "已拒绝";
          break;
      }
      return title;
    };

    // 查询
    const search = () => {
      console.log(form, "表单内容");
      if (Object.keys(form).length == 0) {
        message.warning("请输入你要搜索的内容！！！");
        return;
      }
      deleteObjBlank(form);
      page.current = 1;
      init();
    };
    // 选择时间
    const panelChange = (date, dateString) => {
      console.log("选择的时间是", dateString);
      form.startTime = dateString[0];
      form.endTime = dateString[1];
    };

    const columns = [
      {
        title: "订单号",
        dataIndex: "number",
        className: "table",
        align: "center",
      },
      {
        title: "用户ID",
        dataIndex: "userId",
        className: "table",
        align: "center",
        sort: true,
      },
      {
        title: "耗材名称",
        dataIndex: "bagName",
        className: "table",
        align: "center",
      },
      {
        title: "购买数量",
        dataIndex: "num",
        className: "table",
        align: "center",
      },
      {
        title: "申请时间",
        dataIndex: "createdAt",
        className: "table",
        align: "center",
      },
      {
        title: "支付金额",
        dataIndex: "price",
        className: "table",
        align: "center",
      },
      {
        title: "实际退款金额",
        dataIndex: "endPrice",
        className: "table",
        sorter: true,
        align: "center",
      },
      {
        title: "退款状态",
        dataIndex: "status",
        className: "table",
        align: "center",
        slots: {
          customRender: "status",
        },
      },
      {
        title: "操作",
        dataIndex: "operation",
        className: "table",
        align: "center",
        fixed: "right",
        slots: {
          customRender: "operation",
        },
      },
    ];

    // 分页器
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ["10", "20", "30"],
      showTotal: (total, range) => {
        return "共" + total + "条";
      },
      total: page.total,
      showQuickJumper: true,
      showSizeChanger: true,
    }));

    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      console.log(pagination, "当前分页");
      page.current = pagination.current;
      page.pageSize = pagination.pageSize;

      // 请求列表接口
      init();
    };

    // 全选反选
    const rowSelection = ref({
      checkStrictly: false,
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          "selectedRows: ",
          selectedRows
        );
      },
      onSelect: (record, selected, selectedRows) => {
        // console.log(record, selected, selectedRows,'选择多项');
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        // console.log(selected, selectedRows, changeRows,'全选操作');
      },
    });
    const closeModal = () => {
      data.visible = false;
      if (isEdit.value) {
        init();
      }
    };

    // 删除多项
    const listDel = () => {
      const {closeModal} = useModal.confirm({
        title: "确定删除所选内容项吗?",
        icon: createVNode(ExclamationCircleOutlined),
        content: "删除后将不可恢复，请谨慎操作。",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",

      });
    };
    // 查看
    const look = (key, status) => {
      isEdit.value = false;
      data.visible = true;
      data.number = key;
      data.status = refundOrderStatus(status);
    };

    // 处理
    const deal = (key, status) => {
      isEdit.value = true;
      data.visible = true;
      data.number = key;
      data.status = refundOrderStatus(status);
    };
    const handleChange = (e) => {
      console.log(e);
      form.status = e;
    };
    init();
    async function init() {
      let obj = {
        pageNum: page.current,
        pageSize: page.pageSize,
        ...form,
      };
      let res = await selectAllConsumeRefundOrder(obj);
      if (res.success) {
        res.object.list.map((el) => (el.key = el.number));
        data.list = res.object.list;
        page.total = res.object.total;
      }
      data.loading = false;
    }
    return {
      ...toRefs(data),
      form,
      columns,
      pagination,
      statusList,
      handleTableChange,
      search,
      panelChange,
      deal,
      look,
      rowSelection,
      listDel,
      isEdit,
      closeModal,
      date: "",
      orderListStatusColor,
      handleChange,
      refundOrderStatus,
    };
  },
};
</script>

ConsumeRefund
<style scoped lang="less">
.img {
  width: 50px;
  height: 50px;
}
.title {
  font-weight: bold;
}
.ant-row {
  margin-bottom: 20px;
}
</style>
